import style from './gd.less'
import { useDispatch, useSelector, ArticleModelState, CategoryModelState, NavLink } from 'umi'
import { useEffect } from 'react'
import BadgeReader from '@/components/BadgeReader/BadgeReader';
import ArticleStructure from '@/components/ArticleStructure/ArticleStructure';
type Props = {}
export default function FilingPage({ }: Props) {
    const dispatch = useDispatch();
    const { allfiling } = useSelector((state: { article: ArticleModelState }) => ({ ...state.article }))

    console.log(allfiling);

    useEffect(() => {
        dispatch({
            type: 'article/getFiling'
        })
    }, [])


    return (
        <div className="box">
            <div className={style.container}>
                <div className={style.tis}>
                    <section className={style.lefts}>
                        <div className={style.left_one}>
                            <div className={style.titles}>
                                <p><span>归档</span></p>
                                <p>共计<span>18</span>篇</p>
                            </div>
                            <div className={style.lefts_bottom}>
                                <h2>2022</h2>
                                <div className={style.lefts_bottomlist}>
                                    <h3>January</h3>
                                    {
                                        allfiling.map((item: any) => {
                                            return <ul key={item.id} className={style.dian}>
                                                <NavLink to={`/article/${item.id}`}><li>
                                                    <a href={item.toc}>
                                                        <span className={style.times}>
                                                            <time>
                                                                {item.createAt}
                                                            </time>
                                                        </span>
                                                        <span className={style.texts}>{item.title}</span>
                                                    </a>
                                                </li></NavLink>
                                            </ul>
                                        })
                                    }
                                </div>
                            </div>
                        </div>
                    </section>
                    <aside className={style.rights}>
                            <BadgeReader></BadgeReader>
                            <ArticleStructure></ArticleStructure>
                    </aside>
                </div>
            </div>
        </div>
    );
}
